<template>
  <el-scrollbar class="huanxing-scrollbar">
    <el-menu unique-opened :collapse="isCollapse">
      <sidebar-item
        v-if="menu[topMenuIndex]"
        :menu="menu[topMenuIndex].children"
        :screen="screen"
        first
        :props="propsData"
        :collapse="isCollapse"
      ></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>
<script>
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import SidebarItem from './sidebarItem.vue'
export default defineComponent({
  name: 'sidebarIndex',
  components: {
    SidebarItem,
  },
  setup() {
    const store = useStore()
    const $route = useRouter()

    //查询菜单
    store.dispatch('GetMenu').then((data) => {
      if (data.length > 0) {
        $route.$avueRouter.formatRoutes(data, true)
      }
    })
    //全部导航菜单
    const menu = computed(() => store.getters.menu)
    //顶部导航索引
    const topMenuIndex = computed(() => store.getters.topMenuIndex)
    const isCollapse = computed(() => store.getters.isCollapse)
    const propsData = {
      iconDefault: 'icon-caidan',
      label: 'label',
      path: 'path',
      icon: 'icon',
      children: 'children',
      query: 'query',
      href: 'href',
      meta: 'meta',
    }
    return {
      menu,
      isCollapse,
      propsData,
      topMenuIndex,
    }
  },
})
</script>
<style lang="scss">
.el-menu {
  border-right: none;
}
.huanxing-scrollbar {
  height: calc(100% - 50px) !important;
}
</style>